<template>
	<view class="orderlist">
		<view class="top_nav"  @click="$go('/task/list/order_push')">
			<view class="tp1">
				<view class="left">
					
				</view>
				<view v-if="item.status==0">
						距离派单结束还剩
				</view>
				<view v-if="item.status==1">
						恭喜您已抢单成功
				</view>
				<view v-if="item.status==2">
						抢单失败
				</view>
				
				<view class="right">
					
				</view>
			</view>
			<view class="con">
				<view class="cons">
					<wly-countdown  :hour="getDateStr(item.sy_time,1)" :minute="getDateStr(item.sy_time,2)" :second="getDateStr(item.sy_time,3)" showType="slot">
						<template v-slot="{day, hour, minute, second}">
							<view v-if="day||hour||minute||second">
								<view class="time_model">
									<view>
										{{day}}
									</view>
									<view>
										天
									</view>
								</view>
								<view class="time_model">
									<view>
										{{hour}}
									</view>
									<view>
										时
									</view>
								</view>
								<view class="time_model">
									<view>
										{{minute}}
									</view>
									<view>
										分
									</view>
								</view>
								<view class="time_model">
									<view>
										{{second}}
									</view>
									<view>
										秒
									</view>
								</view>
								
							</view>
						</template>
					</wly-countdown>
				</view>
			</view>
			<view class="bom">
				<text v-if="item.sy_time>0">
							定制需求 | 写手匹配 | 预计匹配于 {{item.end_time_str}}截止
				</text>
				<text v-if="item.sy_time<=0">
							定制需求 | 写手匹配 | 已截稿
				</text>
			</view>
		</view>
		
		<view class="cont">
			<view class="cont_s">
			<view class="con_top">
					<view>
						<view>
								剩余时间：
						</view>
					
					
						<wly-countdown  :hour="getDateStr(item.sy_time,1)" :minute="getDateStr(item.sy_time,2)" :second="getDateStr(item.sy_time,3)" showType="slot">
							<template v-slot="{day, hour, minute, second}">
								<view v-if="day||hour||minute||second">
							
									<view class="">
										<view>
											{{hour}}
										</view>
										<view>
											时
										</view>
									</view>
									<view class="">
										<view>
											{{minute}}
										</view>
										<view>
											分
										</view>
									</view>
									<view class="">
										<view>
											{{second}}
										</view>
										<view>
											秒
										</view>
									</view>
									
								</view>
							</template>
						</wly-countdown>		
					</view>
					<view class="ends">
						<text v-if="item.status==0">待选择</text>
						<text v-if="item.status==1">匹配成功</text>
						<text v-if="item.status==2">已取消</text>
						
					</view>
				</view>
				
				<view class="con_nav">
					<view class="navs">
						<view class="icon">订</view>
						<view class="navs_right">
							<view class="tp">
								文案共计{{item.tran_font_num}}{{item.tran_font_word}}，订单价格每{{item.tran_font_word}}{{item.tarn_price}}币
							</view>
							<view class="bom">截稿时间：{{item.end_time.substring(0,10)}}，风格：{{item.c_desc}}</view>
						</view>
					</view>
					<view class="navs">
						<view class="icon xie">写</view>
						<view class="navs_right">
							<view class="tp">写手等级为:【{{array_level_arr(item.level)}}】</view>
							<view class="bom">写手性别要求:{{item.sex==0?"不限":(item.sex==1?"男":"女")}}
								{{item.is_bao==0?"":'作品所有权归用户所有'}}
							</view>
						</view>
					</view>
					<view class="con_bomt">
						<span>制作要求：</span>
						{{item.c_content}}
					</view>
				</view>
				
				<view class="bomt">
					<view class="bomt_a_left">此订单全额稿费预计</view>
					<view class="bomt_a_right">
						{{item.money}}
						</view>
				</view>
							
				
				<view class="bomt1">
					<view class="bomt_a_left">我的申请</view>
				</view>
				<view class="man_list"  v-for="(item,index) in 6">
					<view class="left">
						<image src="../static/image/tar_order1.png" mode=""></image>
					</view>
					<view class="man_cont">
						<view class="man_top">
							张腾
							<image src="../static/image/tar_order.png" mode=""></image>
							<image src="../static/image/tar_order.png" mode=""></image>
						</view>
						<view class="man_bomt">
							2030 年 05 月 01日 18:34
						</view>
					</view>
					<view class="cnbt">
						皇甫松，字子奇，自号檀栾子，睦州新安人。他是工部侍郎皇甫湜之子，宰相牛僧孺之外甥。《新唐书·艺文志》著录皇甫松《醉乡日月》3卷。其词今存20余首，见于《花间集》、《唐五代词》。事迹见《历代诗馀》。今有王国维辑《檀栾子词》一卷。
					</view>
					<view class="bom_img">
						<image src="../static/image/tar_home1.png" mode=""></image>
						<image src="../static/image/tar_home1.png" mode=""></image>
						<image src="../static/image/tar_home1.png" mode=""></image>
					</view>
					
				</view>
				
				
			</view>
		</view>
		
		<view class="zhanwei"></view>
		<view class="tarb_new">
			<view class="tar_home">
				<view>
					退出抢单
				</view>
			</view>
			<view class="tar_order">
				<view>
					编辑申请
				</view>
			</view>
		</view>
		
		
		
		
		
		<view class="zong">
			<view v-if="show1" class="biaoqian">
				<view class="top">
					<image src="../static/image/tar_order1.png" mode=""></image>
					<view>遥想公瑾当年</view>
					<view>申请抢单</view>
				</view>
				<view class="tab">
					<view>
						&nbsp;&nbsp;
						王守仁，汉族，幼名云，字伯安，号阳明，封新建伯，谥文成，人称王阳明。明代最著名的思想家、文学家、哲学家和军事家。王阳明不仅是宋明心学的集大成者，一生事功也是赫赫有名，故称之为“真三不朽”其学术思想在中国、日本、朝鲜半岛以及东南亚国家乃至全球都有重要而深远的影响，因此，王守仁和孔子、孟子、朱熹并称为孔、孟、朱、王。
					</view>
				</view>
				
				<view class="not_like">
					<view class="tp">例文示例</view>
					<view class="bom">
						<image src="../static/image/tar_home1.png" mode=""></image>
						<image src="../static/image/tar_home1.png" mode=""></image>
						<image src="../static/image/tar_home1.png" mode=""></image>
						<image src="../static/image/tar_home1.png" mode=""></image>
					</view>
				</view>
				
				<view class="cont_t" >
					<view class="t1" @click="no_like(1)">
						<view class="tex">
							确认匹配
						</view>
					</view>
				</view>
			
				<image class="cl1" @click="show1=false" :src="'/images/cl1.png' | formatImgUrl" mode=""></image>
			</view>
			
		</view>
		
		<view v-if="show1" @click="show1=false" class="zhezhao">
		</view>
	</view>
</template>

<script>
	export default { 
		data() {
			return {
				show1:false,
				tar_index:0,
				form: {
					img: [],
					cont:"",
					id:""
				},
				list: [],
				page: 1,
				info:{},
				item:null
			}
		},
		onLoad(ops) {
			this.id = ops.id;
			this.get_info();
		},
		created() {
		   let that = this;
		},
		methods: {
			get_info(){
				var _this = this;
				this.$api.default.request('task/myOrderListdea', {
					id: this.id,
				}).then((res) => {
					if (res.code) {
						_this.item = res.data
					}
				})
			},
			no_order(item){
				let str = "【不感兴趣将不再显示该订单】";
				let _this = this;
				uni.showModal({
					confirmColor: '#45C4B0',
					content: '是否设置不感兴趣？'+str,
					success: function(res) {
						if (res.confirm) {
							_this.$api.default.request('task/order_apply_nolike', {id:item.id}).then((res) => {
								if (res.code) {
									_this.$common.errorToShow('操作成功');
								
									_this.page = 1;
									_this.list = [];
									_this.get_list()
						
									return;
								}
							})
						} else if (res.cancel) {
							
						}
					}
				})
				
			},
			tuichu_order(item){
				let str = "是否确认退出抢单";
				let _this = this;
				uni.showModal({
					confirmColor: '#45C4B0',
					content: '是否'+str,
					success: function(res) {
						if (res.confirm) {
							_this.$api.default.request('task/order_apply_qx', {id:item.id}).then((res) => {
								if (res.code) {
									_this.$common.errorToShow('退出成功');
								
											_this.page = 1;
											_this.list = [];
											_this.get_list()
						
									return;
								}
							})
						} else if (res.cancel) {
							
						}
					}
				})
				
			},
			qr_order(){
				if(this.form.cont == "" || this.form.cont == "  "){
					this.$common.errorToShow('抢单原因必填');
					return;
				}
				this.form.id = this.info.id;
				
				let str = "确认抢单";
				let _this = this;
				uni.showModal({
					// cancelText: '取消',
					// confirmText: '确定',
					confirmColor: '#45C4B0',
					content: '是否'+str,
					success: function(res) {
						if (res.confirm) {
							
							_this.$api.default.request('task/order_apply', _this.form).then((res) => {
								if (res.code) {
									_this.show1 = false;
									_this.$common.errorToShow('支付成功');
									setTimeout(function() {
											
											uni.navigateTo({
												url: '/task/list/my_orderlist'
											})
									}, 600);
									return;
								
								}
							})
						} else if (res.cancel) {
							
						}
					}
				})
			},
			apply_order(item){
				this.info = item;
				this.form = {
					img: [],
					cont:"",
					id:""
				}
				this.show1 = true
			},
			getDateStr(mss,type){
					    var days = parseInt(mss / 86400);
						var hours = parseInt((mss-(days*86400))/3600);
						var minutes = parseInt((mss-(days*86400)-(hours*3600))/60);
						var seconds = mss-(days*86400)-(hours*3600) - (minutes * 60)
						
						 if(type == 0){
						 	 return days;
						 }
						 if(type == 1){
							  return hours;
						 }
						 if(type == 2){
						 	  return minutes;
						 }
						 if(type == 3){
							  return seconds;
						 }
					
			},	
			array_level_arr(index){
			
					var array_level = ['不限', '1-10', '11-20','21-30','21-30','31-40','41-50'];
					return array_level[index];
			},
			goToxie() {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + this.$config.default.Url + '/agreement/1000009'
				})
			},
			hidePay(e){
				console.log(e)
			},
			goPay(){
				
				this.$api.default.request('order/createvip', prams).then((res) => {
					if (res.code) {
						this.$common.wxPay(res.data, () => {
						
							that.$common.errorToShow('支付成功');
							setTimeout(function(){
								uni.navigateTo({
									url: '/pages/user/orderdetail?id=' + this.orderInfo.id
								})
							}, 800); 
						})
					}
				})
				
			},
			isReadTip() {
				if (!this.isRead) {
					this.$common.errorToShow('请先同意用户协议');
					this.isRead = 1
					setTimeout(() => {
						this.isRead = 0;
					}, 300)
					return
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f2f5f2;
	}
	.orderlist {
		background: url('../static/image/suc.png');
		background-size: 100%;
		width: 100%;
		height: 100vh;
		.zhanwei{
			width: 100%;
			height: 100px;
			float: left;
		}
		
		.top_nav{
			width: 92%;
			margin-left: 4%;
			.tp1{
				// padding-top:12px;
				color: #fff;
				width: 100%;
				text-align: center;
				.left{
					position: relative;
					width: 30px;
					height: 2px;
					left:20%;
					top:10px;
					background:linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0.00) 100%) ;
				}
				.right{
					position: relative;
					left:73%;
					width: 30px;
					top:-10px;
					height: 2px;
					background:linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0.00) 100%);
				}
			}
			.con{
				width: 100%;
				text-align: center;
				.cons{
					margin: 0 auto;
					width:294px;
					margin-top: 10px;
					.time_model{
						float: left;
						width:66px;
						margin-left: 10px;
						height: 63px;
						text-align: center;
						background: radial-gradient(50% 50% at 50% 50%, #45C4B0 0%, #45CEB9 100%);
						border-radius:0.5em;
						color: #fff;
						box-sizing: border-box;
						border: 1px solid ;
						// border-image: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.00) 52%, rgba(255,255,255,0.30) 100%) 1;
						// box-shadow: 0px 0px 10px 0px #03D3B2,inset 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
						&:first-child{
							margin-left: 0px;
						}
						view{
							font-weight: 700;
							width: 100%;
							text-align: center;
							font-size:  30px;
							&:last-child{
								font-size: 12px;
							}
						}
					}
				}
			}
			.bom{
				margin-top: 15px;
				width: 100%;
				font-size: 12px;
				text-align: center;
				color: #fff;
			}
		}
		.cont{
			width: 92%;
			margin-left: 4%;
			border-radius: 0.5em;
			background: #fff;
			margin-top: 6px;
			color: #3d3d3d;
			font-weight: 640;
			float: left;
			.cont_s{
				width: 90%;
				margin-left: 5%;
				.con_top{
					padding-top: 12px;
					width: 100%;
					font-size: 12px;
					float: left;
					font-weight: 400;
					color: #999;
					padding-bottom: 8px;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);
					view{
						float: left;
					}
					.ends{
						float: right;
						color: #45C4B0;
						font-size: 11px;
						font-weight: 500;
						background: rgba(69, 196, 176, 0.15);
						border-radius: 4px;
						padding: 3px 6px;
					}
				}
			}
			.con_nav{
				margin-top: 10px;
				width: 100%;
				float: left;
				.navs{
					.icon{
						width: 14px;
						height: 14px;
						border-radius: 6px;
						padding: 2px 3px;
						background: #45C4B0;
						float: left;
						font-size: 9px;
						line-height: 14px;
						color: #fff;
						text-align: center;
						position: relative;
						top:2px;
						margin-right: 5px;
					}
					.navs_right{
						.tp{
							font-size: 15px;
							width: 100%;
						}
						.bom{
							margin-left: 25px;
							width: 100%;
							color: #999;
							font-size: 12px;
							font-weight: 400;
							margin-top: 5px;
							margin-bottom: 10px;
						}
					}
				}
				.con_bomt{
					font-weight: 400;
					width: 80%;
					padding-left: 10%;
					padding-right: 10%;
					background: rgba(216, 216, 216, 0.3);
					height: 35px;
					color: #999;
					font-size:10px;
					border-radius: 0.5em;
					padding-top: 5px;
					span{
						color: #45C4B0;
					}
				}
			}
			.bomt{
				 margin-top: 12px;
				 padding-bottom: 8px;
				 border-bottom:  1px solid rgba(153, 153, 153, 0.1);;
				 float: left;
				 width: 100%;
				 font-size: 15px;
				.bomt_a_left{
					float: left;
				}
				.bomt_a_right{
					float: right;
					color: #45C4B0;
					 font-size: 16px;
					span{
						font-size: 12px
					};
				}
				&:last-child{
					font-size: 12px;
				}
			}
			
			.bomt1{
				 margin-top: 12px;
				 padding-bottom: 8px;
			
				 float: left;
				 width: 100%;
				 font-size: 15px;
				.bomt_a_left{
					float: left;
					font-size: 12px;
				}
				.bomt_a_right{
					float: right;
					color: #45C4B0;
					 font-size: 16px;
					span{
						font-size: 12px
					};
				}
			
			}
			.bomt_one{
				width: 100%;
				float: left;
				margin-top: 10px;
				height: 50px;
				view{
					width: 120px;
					height: 32px;
					line-height: 32px;
					border-radius: 0.2em;
					font-size: 13px;
					text-align: center;
					&:first-child{
						float: left;
						margin-left: 10px;
						background: rgba(216, 216, 216, 0.3);
						color: #999;
					}
					&:last-child{
						float: right;
						margin-right: 10px;
						background: #45C4B0;
						color: #fff;
					}
				}
			}
			.man_list{
				width: 100%;
				float: left;
				margin-top: 15px;
				padding-bottom: 10px;
				.left{
					float: left;
					image{
						width: 40px;
						height: 40px;
						border-radius: 184px;
					}
				}
				.man_cont{
					
					margin-left: 5px;
					float: left;
					.man_top{
						image{
							width: 15px;
							height: 15px;
						}
					}
					.man_bomt{
						font-size: 12px;
						color: #999;
						font-weight: 500;
					}
				}
				.man_right{
					float: right;
					margin-right: 10px;
					text-align: center;
					width: 58px;
					height: 26px;
					line-height: 26px;
					border-radius: 4px;
					background: #45C4B0;
					font-size: 9px;
					color: #fff;
					margin-top: 10px;
				}
				
				.cnbt{
					width: 100%;
					float: left;
					font-size: 11px;
					margin-top: 5px;
					color:#999;
					font-weight: 400;
				}
				.bom_img{
					width: 100%;
					image{
						float: left;
						width:60px;
						height: 60px;
						background-size: 100%;
						margin-left: 10px;
					}
				}
			}
		}
		
		.tarb_new{
			position: fixed;
			bottom: 0px;
			left: 0px;
			height: 50px;
			width: 100%;
			font-size: 12px;
			background: #fff;
			padding-top: 10px;
			.tar_home{
				width: 50%;
				float: left;
				view{
					width: 150px;
					height:35px;
					line-height: 35px;
					background: rgba(216, 216, 216, 0.3);
					color:#000;
					margin: 0 auto;
					text-align: center;
					border-radius: 0.3em;
				}
			}
			
			.tar_order{
				width: 50%;
				float: left;
				view{
					width: 150px;
					height:35px;
					line-height: 35px;
					background: #45C4B0;
					color:#fff ;
					margin: 0 auto;
					text-align: center;
					border-radius: 0.3em;
				}
			}
		}
	
	.zong{
		position: fixed;
		width: 90%;
		text-align: center;
		margin: 0 auto;
		margin-left: 5%;
		top:15%;
		z-index:102;
	}
	.biaoqian{
		
			border-radius: 0.5em;
			background: #fff;
			width:600rpx;
			margin: 0 auto;
			.top{
				padding-top:70rpx;
				font-size: 28rpx;
				color: #000;
			    text-align: center;
				width: 90%;
				margin-left: 5%;
				image{
					width: 130rpx;
					height: 130rpx;
					position: absolute;
					left: 265rpx;
					top:-35px;
					margin: 0 auto;
					border-radius: 20em;
				}
				view{
					&:first-child{
						font-weight: 700;
						font-size:16px;
						color: #3D3D3D;
					}
					&:last-child{
						margin-top: 6px;
						font-size:12px;
						color: #999;
					}
				}
			}
			
			.tab{
				padding-top: 10rpx;
				font-size: 21rpx;
				font-weight: 700;
				width:90%;
				margin-left: 5%;
				float: left;
				text-align: center;
				view{
					font-weight: 500;
					background: rgba(153, 153, 153, 0.2);
					padding:20px 10px;
					padding-bottom: 20px;
					margin-left: 16rpx;
					border-radius: 0.5em;
					text-align: center;
					float: left;
					color: #999;
					text-align: left;
				}
			}
			
			.not_like{
				width:86%;
				margin-left: 7%;
				border-radius: 0.5em;
				text-align: center;
				float: left;
				color:#999;
				font-size: 27rpx;
				margin-top:40rpx;
				text-align: left;
				padding-bottom: 20px;
				background: rgba(216, 216, 216, 0.3);
				.tp{
					padding: 5px 10px;
					font-size: 12px;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				}
				image{
					margin-top: 5px;
					width:60px;
					height: 60px;
					float: left;
					border-radius: 0.5em;
					margin-left: 5px;
					&:first-child{
						margin-left: 0px;
					}
				}
			}
			
			.line{
				margin-top:30rpx;
				width:88%;
				margin-left:6%;
				float: left;
				height: 0px;
				opacity: 1;
				border: 1rpx solid rgba(153, 153, 153, 0.1);
			}
			.cont_t{
				border-radius: 8px;
				opacity: 1;
				background: #45C4B0;
				float: left;
				width: 80%;
				height: 86rpx;
				margin-left: 10%;
				margin-right: 10%;
				text-align: center;
				margin-top: 30rpx;
				color: #fff;
				line-height: 86rpx;
			
			}
			.cont_b{
				float: left;
				width: 100%;
				text-align: center;
				margin-top: 20rpx;
				background: rgba(69, 196, 176, 0.05);
				float: left;
				width: 92%;
				height: 86rpx;
				margin-left: 4%;
				color: #45C4B0;
				.t1{
					width: 50%;
					margin: 0 auto;
					margin-top: 20rpx;
					image{
						width:33rpx;;
						height: 33rpx;
						float: left;
					}
					.tex{
						 float: left;
						 margin-left: 10rpx;
					}
				}
				
				
			}
		}
	.cl1{
			height: 60rpx;
			width: 60rpx;;
			position: relative;
			top:110rpx;
	}
	.zhezhao{
		height: 100vh;
		position: fixed;
		top:0rpx;
		right:0px;
		width: 100%;
		z-index:101;
		background: rgba(51, 51, 51, 0.6);
	}
	}
</style>